<template>
	<view>
		<v-tabs :lineHeight="0" fixed v-model="activeTab" :scroll="false" :tabs="['投诉举报', '投诉记录']" @change="changeTab"></v-tabs>
		<form v-show="activeTab==0">
			<view class="cell">
				<view class="cell-title">房号</view>
				<hg-select :clearable="false" :searchable="false" :items="bindeds" v-model="room" class="cell-content"></hg-select>
			</view>
			
			<view class="cell required">
				<view class="cell-title">问题描述</view>
				<textarea maxlength="256" focus auto-height auto-focus adjust-position 
				class="cell-content" v-model="post.remark" placeholder="请输入详细问题描述内容" />
			</view>
			
			<view class="cell required">
				<view class="cell-title">联系人</view>
				<input class="cell-content" v-model="post.name" placeholder="请输入联系人姓名"/>
			</view>
			
			<view class="cell required">
				<view class="cell-title">联系电话</view>
				<input class="cell-content" type="number" maxlength="11" v-model="post.contactPhone" placeholder="请输入联系电话"/>
			</view>
				
			<center>请上传问题图片</center>
			<view style="margin-bottom: 100rpx;">
				<mk-upload :column="3" :imgList="picUrls" @onChoose="chooseImg" @onDelete="deleteImg"></mk-upload>
			</view>
			<view class="bottom horizontal">
				<button style="color: white;background-color: var(--color-ok);" class="capsule scale" @tap="submit">投诉举报</button>
			</view>
		</form>
		<view v-show="activeTab==1">
			<block v-if="records.total>0">
				<div class="litem" v-for="(item, idx) in records.list" :key='idx'>
					<view class="horizontal">
						<view class="type">{{item.address}}</view>
						<view class="date">{{item.commitTime | smartTime('YY/mm/dd')}}</view>
					</view>
					<view class="horizontal">
						<view class="id">{{item.remark}}</view>
						<view :style="item.handleStatus==2?'color:gray':'color:red'">{{item.handleStatus==2?'已解决':'未解决'}}</view>
					</view>
				</div>
			</block>
			<view class="vertical abscenter" v-else>
				<image src="../../static/icons/empty.png" mode="widthFix" class="no-records-icon"></image>
				<view class="gst">暂时没有投诉记录~~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import juFieldGroup from '@/components/ju-field/ju-field-group.vue';
	import juField from '@/components/ju-field/ju-field.vue';
	import mkUpload from '@/components/mk-upload/mk-upload.vue'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	
	import card from '@/mixins/card.js'
	
	const app = getApp()
	
	export default {
		onReachBottom() {
			this.pullNewRecord(this.records, app.globalData.curl + 'complaint/list')
		},
		components:{
			hgCell, xflSelect, juFieldGroup, juField, mkUpload, vTabs, 
		},
		mixins:[card,],
		onShow() {
			this.refreshRecord(this.records, app.globalData.curl + 'complaint/list')
		},
		data() {
			return {
				activeTab:0,
				// 投诉记录列表
				records:{
					pageNum: 1,  // 当前页数
					pageSize: 10, // 当前页数量
					totalPage: '', // 总页数
					total: '', //  总记录数
					list:[
						
					]
				},
				post:{
					name:'',
					contactPhone:'',
					code:'',
					// 房号
					roomId: '',
					// 故障图片
					picUrls:[
						
					],
					// 故障详细描述
					remark:'',
				},
				picUrls:[],
				uploaded: '',
			}
		},
		watch:{
			uploaded(newVal){
				if(newVal>=this.picUrls.length){
					// 已经上传完所有的图片，可以进行表单提交
					uni.request({
						header:{
							Authorization: 'Bearer ' + app.globalData.token,
						},
						url: app.globalData.curl + 'complaint/create',
						method: 'POST',
						data: {
							...this.post,
							roomId: this.get.rooms[this.room].id,
						},
						success: res => {
							const {data} = res
							uni.hideLoading()
							if(data.code==200){
								uni.showModal({
									showCancel: false,
									title: '投诉举报',
									content: '提交成功，我们工作人员会尽快为你解决！',
									success: (res) => {
										if(res.confirm){
											this.activeTab = 1
											this.refreshRecord(this.records, app.globalData.curl + 'complaint/list')
											this.Reset()
										}
									}
								})
							}else if(data.code==500){
								uni.showToast({
									icon:'none',
									title: data.message,
								})
							}
						},
						fail: (err) => {
							uni.hideLoading()
							console.error(err)
						},
						complete: (res) => {
							
						}
					});
				}
			}
		},
		methods: {
			Reset(){
				this.post.picUrls=[]
				this.picUrls=[]
				this.uploaded=-1
				this.post.remark=''
				
			},
			// 下拉刷新
			refreshRecord(list, url, extra={}){
				list.pageNum=1
				list.pageSize=10
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: 1,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						console.log(data)
						if(data.code==200){
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							// 直接重置数组
							list.list=data.data.list
							uni.stopPullDownRefresh()
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			// 拉取新的数据
			pullNewRecord(list, url, extra={}){
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: list.pageNum || 1,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							if(list.list.length<d.total){
								list.pageNum++
								if(d.list.length>0){
									list.list.push(...d.list)
								}
							}
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeTab(e){
				if(e==1){
					this.refreshRecord(this.records, app.globalData.curl + 'complaint/list')
				}
			},
			chooseImg(evt){
				this.picUrls.push(...evt.tempFilePaths)
			},
			deleteImg(evt){
				this.picUrls.splice(evt, 1)
			},
			submit(){
				if(!this.post.name || !this.post.contactPhone){
					uni.showToast({
						title: '联系人和联系方式必填！',
						icon:'none',
						duration:5000,
					});
					return
				}
				if(this.post.remark.trim()==''){
					uni.showToast({
						icon:'none',
						title:'未填写问题描述',
						duration:3000
					})
					return;
				}
				if(this.picUrls.length>0){
					uni.showLoading({
						title:'上传图片中...'
					})
					this.post.picUrls.push(...this.picUrls)
					// 依次循环上传图片集
					for (let i=0;i<this.picUrls.length;i++) {
						const idx = i				// 闭包作用
						const pic = this.picUrls[idx]
						uni.uploadFile({
							header:{
								Authorization: 'Bearer ' + app.globalData.token,
							},
							url: 'https://api.isaim.cn/citizenry/file/upload',
							filePath: pic,
							name: "file",
							formData:{},
							fail:(err)=>{console.error(err)},
							success:(res)=>{
								let data = JSON.parse(res.data)
								console.log(data)
								if(data.code==200){
									const url = data.data
									// 记录下图片的远程地址
									this.post.picUrls[idx] = url
									console.log(url)
									this.uploaded++
								}else if(data.code==500){
									uni.showToast({
										icon:'none',
										title: data.message,
									})
								}
							}
						})
					}
				}else{
					uni.showLoading({
						title:'提交中...'
					})
					this.uploaded = 1
				}
			},
		}
	}
</script>

<style>
	page{
		padding-top: 0;
	}
	textarea{
		background-color: white;
		border-radius: 10rpx;
	}
	
	.type{
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
	}
	
	.date{
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		color: #A3A3A3;
		line-height: 36rpx;
	}
	
	.id{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		color: #666666;
		line-height: 36rpx;
	}
</style>
